<template>
	<view class="page">
		<u-navbar leftIconSize='30rpx'  :placeholder="true" title="我的消息"   @leftClick="$utils.back()" border >
			<view slot='right' style="font-size: 26rpx;" :style="{marginRight:menuRight+'px'}" @click="ChooseAll">标为已读</view>
		</u-navbar>
		<view class="box">
			<z-paging ref="paing" style="height: 100%;"  :fixed="false" v-model="data" @query="query" :default-page-no="1" :default-page-size="10">
				<template v-if="loading">
						<view v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13]" :key="item" style="height: 30px;margin-top: 10px;" class="Skeleton"></view>
				</template>
				<template v-else>
					<view v-for="item in data" :key="item.id" class="contentBox" @click="jump(item.id)">
						<view v-if="!item.read_at"  style="background-color: red;width: 20rpx;height: 20rpx;border-radius: 100%;margin-right: 20rpx;margin-top: 10rpx;" />
						<view style=" flex: 1;">
							{{item.data.message}}
						</view>
					</view>
				</template>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[],
				loading:true,
				menuRight:null
			}
		},
		onLoad(){
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect() //可以获取小程序胶囊的位置。
			this.menuRight = menuButtonInfo.width
		},
		methods: {
			query(page,size){
				let obj={
					page,
					size
				}
				this.$api.My.message(obj).then(res=>{
					this.$refs.paing.complete(res.data.data)
					this.loading=false
				})
			},
			jump(id){
				let item=this.data.filter(item=>item.id==id)[0]
				if(item.read_at) return
				this.$api.My.notificationMarkAsRead(id)
				this.data.forEach(item=>{
					if(item.id==id){
						item.read_at=1
					}
				})
			},
			ChooseAll(){
				let boolean=false
				boolean=this.data.some(item=>!item.read_at)
				if(!boolean) return
				this.data=this.data.map(item=>{
					return{
						...item,
						read_at:1
					}
				})
				this.$api.My.notificationMarkAllAsRead()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Skeleton {
		background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
		background-size: 400% 100%;
		border-radius: 3px;
		animation: loading 1.5s infinite;
	}
	
	@keyframes loading {
		/* 骨架屏的动画 */
	
		0% {
			background-position: 100% 50%;
		}
	
		100% {
			background-position: 0 50%;
		}
	}
 .page{
	 display: flex;
	 flex-direction: column;
	 height: 100vh;
	 padding: 0 40rpx;
 }
 .box{
	 flex:1;
	 box-sizing: border-box;
	 
	 padding-bottom: constant(safe-area-inset-bottom);
	 /* 兼容 iOS 设备 */
	 padding-bottom: env(safe-area-inset-bottom);
 }
 .contentBox{
	 display: flex;
	 padding: 40rpx 0;
	 border-bottom: 1px solid #f1f1f1;
 }
</style>
